<template>
	<view>
		<view style="position: relative;">

			<ListTools style="display: flex;" :total="count" :sedate="{st: stime, et: etime}" @selDate="selAlSeDate">

			</ListTools>

			<view @click="routeSimpleName_btn" class="routeSimpleName">
				<view>{{routeSimpleName}}</view>
				<u-icon name="arrow-down-fill" size="20"></u-icon>
			</view>
		</view>

		<scroll-view :scroll-top="scrollTop" @scroll="scroll" style="height: 85vh;width: 100%;margin-top: 0rpx;"
			scroll-y @scrolltolower="tabReachBottom" :refresher-enabled="true" :refresher-threshold="80"
			:refresher-background="'#efefef'" :refresher-triggered="load.triggered" @refresherrefresh="downPullRefres">
			<view class="my-list" style="margin-top: 80rpx;">

				<view class="no-data" v-if="dataList.length == 0"><u-empty text="没有订单数据" mode="list"></u-empty>
				</view>
				<template v-else>
					<view class="ml-item" v-for="(it, index) in dataList" :key="it.id">
						<view class="i-title-row">


							<view class="r-title">{{it.routeSimpleName}}</view>
							<view class="r-detail-btn" @click="showBzDetail(it.id)">详情
								<u-icon name="arrow-right" color="#666"></u-icon>
							</view>

						</view>
						<view class="content">
							<view class="title" v-html="it.details"></view>
						</view>
						<view style="font-weight: 700;">
							<!-- {{it.cusName+'-'+it.cusMobile}} -->
							<view style='color: #4749a0;'>客户信息:{{it.cusInfo}}
								<text style="color: red;">({{it.personNum}}人)</text>
							</view>
							<view style='color: #4749a0;'>抢单价格:
								<text style="color: red;">{{it.price}}元</text>
							</view>
						</view>
						<view class="bottom">
							<view :style="{'border-color': '#f00000', 'color': '#f00000'}" class="btn"
								@click="qingdan(it)">
								抢单
							</view>

						</view>

					</view>


					<u-loadmore :status="load.status" :load-text="load.loadText" bgColor="#f2f2f2"></u-loadmore>
				</template>

			</view>
		</scroll-view>

		<u-modal @confirm='ok_qingdanshow_btn' :show-cancel-button='true' v-model="qingdan_show"
			:content="'是否确认抢单?'"></u-modal>

		<u-select @confirm="routeSimpleName_sheet" :label-name='"text"' :value-name='"text"'
			v-model="routeSimpleName_show" :list="routeSimpleNameList"></u-select>
		<u-tabbar :list="tabbar"></u-tabbar>
	</view>
</template>

<script>
	import ListTools from '@/components/list-tools/list-tools.vue';
	export default {
		components: {
			ListTools,
		},
		data() {
			return {
				qingdan_data: {},
				qingdan_show: false,
				tabbar: '',
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				routeSimpleName: '全部',
				// 开始时间
				stime: this.getMonthFirstDay(),
				// 结束时间
				etime: this.getMonthLastDay(),
				count: 0,
				// 列表加载更多对象
				page: {
					pageNum: 1,
					pageSize: 20,
				},
				routeSimpleName_show: false,
				load: this.U.scopy(this.C.loadmore),
				dataList: [],
				routeSimpleNameList: [{
						text: '全部',
					},
					{
						text: '送天府',
					},
					{
						text: '接天府',
					},
					{
						text: '拼车送天府',
					},
					{
						text: '拼车接天府',
					},
					{
						text: '送双流',
					},
					{
						text: '接双流',
					},
					{
						text: '送东站',
					},
					{
						text: '接东站',
					},
					{
						text: '送西站',
					},
					{
						text: '接西站',
					},
					{
						text: '送南站',
					},
					{
						text: '接南站',
					},
					{
						text: '送集合点大巴',
					},
					{
						text: '接集合点大巴',
					},
				],
			}
		},
		onLoad(e) {
			let lrole = uni.getStorageSync('lrole');
			let isDot = uni.getStorageSync('isDot');
			if (lrole.roleName == '驾驶员') {
				this.tabbar = [{
						iconPath: "/static/tabbar/order.png",
						selectedIconPath: "/static/tabbar/order-sel.png",
						text: '订单',
						isDot: false,
						pagePath: "/pages/tabbar/order-list/order-list"
					},
					{
						iconPath: "/static/tabbar/bz.png",
						selectedIconPath: "/static/tabbar/bz-sel.png",
						text: '报账',
						isDot: false,
						pagePath: "/pages/tabbar/order-bz-list/order-bz-list"
					}, {
						iconPath: "/static/tabbar/user.png",
						selectedIconPath: "/static/tabbar/user-sel.png",
						text: '我的',
						isDot: false,
						pagePath: "/pages/tabbar/my/my"
					}
				]
			} else {
				this.tabbar = [{
						iconPath: "/static/tabbar/order.png",
						selectedIconPath: "/static/tabbar/order-sel.png",
						text: '订单',
						isDot: false,
						pagePath: "/pages/tabbar/order-list/order-list"
					},
					{
						iconPath: "/static/tabbar/notice.png",
						selectedIconPath: "/static/tabbar/bz-sel.png",
						text: '抢单',
						isDot: false,
						pagePath: "/pages/tabbar/my-notice/my-notice"
					},
					{
						iconPath: "/static/tabbar/bz.png",
						selectedIconPath: "/static/tabbar/notice-sel.png",
						text: '报账',
						isDot: false,
						pagePath: "/pages/tabbar/order-bz-list/order-bz-list"
					}, {
						iconPath: "/static/tabbar/user.png",
						selectedIconPath: "/static/tabbar/user-sel.png",
						text: '我的',
						isDot: false,
						pagePath: "/pages/tabbar/my/my"
					}
				]
			}
			// 查询
			this.queryList();
		},
		methods: {
			getMonthFirstDay() {
				// 获取当前日期
				let currentDate = new Date();

				// 提取年月日部分
				let year = currentDate.getFullYear();
				let month = String(currentDate.getMonth() + 1).padStart(2, '0');
				let day = String(currentDate.getDate()).padStart(2, '0');

				let todayString = `${year}-${month}-${day}`;
				let data = todayString + ' ' + '00:00:00'
				return data
			},
			getMonthLastDay() {
				// 获取当前日期
				let currentDate = new Date();

				// 加上7天的毫秒数
				let nextWeekDate = new Date(currentDate.getTime() + 7 * 24 * 60 * 60 * 1000);

				// 提取年月日部分
				let year = nextWeekDate.getFullYear();
				let month = String(nextWeekDate.getMonth() + 1).padStart(2, '0');
				let day = String(nextWeekDate.getDate()).padStart(2, '0');

				let nextWeekDateString = `${year}-${month}-${day}`;
				let data = nextWeekDateString + ' ' + '23:59:59'
				console.log(data, 'data')
				return data
			},
			qingdan(e) {
				let that = this
				uni.requestSubscribeMessage({
					tmplIds: ['sui5ibET4_8NLYktS8kKfjo-ZKeNa17WNpC_BRJCyCs'], // 订阅消息模板id列表
					success: (res) => {
						console.log("订阅消息 成功 " + res);
						that.qingdan_data = e
						that.qingdan_show = true

					},
					fail: (errCode, errMessage) => {
						console.log("订阅消息 失败 " + errCode + " message " + errMessage);

						that.qingdan_data = e
						that.qingdan_show = true

					},
					complete: (errMsg) => {
						console.log("订阅消息 完成 " + errMsg);
						that.qingdan_data = e
						that.qingdan_show = true
					}
				})

			},
			ok_qingdanshow_btn() {
				let that = this
				let data = that.qingdan_data
				let params = {
					id: data.id
				}

				that.$u.api.confirmGrabOrder(params).then(res => {


					if (res.code == 1) {
						uni.$u.toast(res.msg);
						that.queryList();
					} else {
						uni.$u.toast(res.msg);
					}
				});
			},
			showBzDetail(e) {


				uni.navigateTo({
					url: '/order-man/order-detail/order-detail?id=' + e
				})
			},
			routeSimpleName_sheet(e) {

				// 重新查询
				let that = this
				for (let i = 0; i < that.routeSimpleNameList.length; i++) {
					if (e[0].value == that.routeSimpleNameList[i].text) {
						let data = that.routeSimpleNameList[i]
						that.routeSimpleName = that.routeSimpleNameList[i].text

					}
				}
				that.queryList();
			},
			routeSimpleName_btn() {
				this.routeSimpleName_show = true
			},

			selAlSeDate(e) {
				// console.log('起止日期选择事件', e);

				this.stime = e.st;
				this.etime = e.et;

				// 重新查询
				this.queryList();
			},
			// 查询数据
			queryList(page) {
				let that = this

				// 存在，则表示刷新
				if (!page) {
					// 开始刷新
					that.load.triggered = true;
					that.page.pageNum = 1;
				}
				const params = {
					page: {
						pageNum: that.page.pageNum,
						pageSize: that.page.pageSize,
					},
					status: '',
					routeSimpleName: that.routeSimpleName == '全部' ? '' : that.routeSimpleName,
					timeType: '0',
					stime: that.stime,
					etime: that.etime,
				}
				that.$u.api.getOrderReadyList(params).then(res => {
					// 第一页的时候，停止刷新
					if (!page) {
						// 停止刷新
						that.load.triggered = false;
						// 刷新则清空列表
						that.dataList = [];
					}
					if (res.code == 1) {
						if (res.data.total == 0) {
							let lrole = uni.getStorageSync('lrole');
							let isDot = uni.getStorageSync('isDot');
							if (lrole.roleName == '驾驶员') {
								this.tabbar = [{
										iconPath: "/static/tabbar/order.png",
										selectedIconPath: "/static/tabbar/order-sel.png",
										text: '订单',
										isDot: false,
										pagePath: "/pages/tabbar/order-list/order-list"
									},
									{
										iconPath: "/static/tabbar/bz.png",
										selectedIconPath: "/static/tabbar/bz-sel.png",
										text: '报账',
										isDot: false,
										pagePath: "/pages/tabbar/order-bz-list/order-bz-list"
									}, {
										iconPath: "/static/tabbar/user.png",
										selectedIconPath: "/static/tabbar/user-sel.png",
										text: '我的',
										isDot: false,
										pagePath: "/pages/tabbar/my/my"
									}
								]
							} else {
								this.tabbar = [{
										iconPath: "/static/tabbar/order.png",
										selectedIconPath: "/static/tabbar/order-sel.png",
										text: '订单',
										isDot: false,
										pagePath: "/pages/tabbar/order-list/order-list"
									},
									{
										iconPath: "/static/tabbar/notice.png",
										selectedIconPath: "/static/tabbar/bz-sel.png",
										text: '抢单',
										isDot: false,
										pagePath: "/pages/tabbar/my-notice/my-notice"
									},
									{
										iconPath: "/static/tabbar/bz.png",
										selectedIconPath: "/static/tabbar/notice-sel.png",
										text: '报账',
										isDot: false,
										pagePath: "/pages/tabbar/order-bz-list/order-bz-list"
									}, {
										iconPath: "/static/tabbar/user.png",
										selectedIconPath: "/static/tabbar/user-sel.png",
										text: '我的',
										isDot: false,
										pagePath: "/pages/tabbar/my/my"
									}
								]
							}
						} else {
							let lrole = uni.getStorageSync('lrole');
							let isDot = uni.getStorageSync('isDot');
							if (lrole.roleName == '驾驶员') {
								this.tabbar = [{
										iconPath: "/static/tabbar/order.png",
										selectedIconPath: "/static/tabbar/order-sel.png",
										text: '订单',
										isDot: false,
										pagePath: "/pages/tabbar/order-list/order-list"
									},
									{
										iconPath: "/static/tabbar/bz.png",
										selectedIconPath: "/static/tabbar/bz-sel.png",
										text: '报账',
										isDot: false,
										pagePath: "/pages/tabbar/order-bz-list/order-bz-list"
									}, {
										iconPath: "/static/tabbar/user.png",
										selectedIconPath: "/static/tabbar/user-sel.png",
										text: '我的',
										isDot: false,
										pagePath: "/pages/tabbar/my/my"
									}
								]
							} else {
								this.tabbar = [{
										iconPath: "/static/tabbar/order.png",
										selectedIconPath: "/static/tabbar/order-sel.png",
										text: '订单',
										isDot: false,
										pagePath: "/pages/tabbar/order-list/order-list"
									},
									{
										iconPath: "/static/tabbar/notice.png",
										selectedIconPath: "/static/tabbar/bz-sel.png",
										text: '抢单',
										isDot: true,
										pagePath: "/pages/tabbar/my-notice/my-notice"
									},
									{
										iconPath: "/static/tabbar/bz.png",
										selectedIconPath: "/static/tabbar/notice-sel.png",
										text: '报账',
										isDot: false,
										pagePath: "/pages/tabbar/order-bz-list/order-bz-list"
									}, {
										iconPath: "/static/tabbar/user.png",
										selectedIconPath: "/static/tabbar/user-sel.png",
										text: '我的',
										isDot: false,
										pagePath: "/pages/tabbar/my/my"
									}
								]
							}
						}
						if (res.data.total > res.data.list.length) {
							let dataList = res.data.list
							that.count = res.data.total
							// 追加数据
							if (that.dataList.length < that.count) {
								that.dataList = that.dataList.concat(dataList);
							} else {

							}


							that.load.status = that.dataList.length == that.count ? 'nomore' : 'loadmore';
						} else {
							let dataList = res.data.list
							// 追加数据
							that.dataList = dataList
							that.count = res.data.total
							// 设置加载状态
							that.load.status = that.dataList.length == that.count ? 'nomore' : 'loadmore';
						}

					}
				});
			},
			scroll: function(e) {

				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				let that = this
				// 解决view层不同步的问题

				that.scrollTop = that.old.scrollTop

				that.$nextTick(function() {
					that.scrollTop = 0

				});


			},
			// 设置-底部上滑加载数据时状态显示
			tabReachBottom() {
				let that = this;

				// 数据已经加载完
				if (that.dataList.length == that.dataList.total) {
					// 设置加载状态为：没有更多了
					that.load.status = 'nomore';
				} else {
					// 设置加载状态为：加载中...
					that.load.status = 'loading';
					// 增加一页页码
					that.page.pageNum++;
					that.queryList(1);
				}
			},
			// 下拉刷新
			downPullRefres() {
				// 重新查询
				this.queryList();
			},
		}
	}
</script>

<style lang="scss">
	.routeSimpleName {
		position: absolute;
		left: 380rpx;
		width: 200rpx;
		background: #fff;
		top: 10rpx;
		z-index: 9999;
		text-align: center;
		border-radius: 10rpx;
		border: 1px solid #00C3CE;
		color: #00C3CE;
		margin-right: 10rpx;
		display: flex;
		height: 40rpx;
		justify-content: space-between;

	}

	.bottom {
		display: flex;
		margin-top: 20rpx;
		justify-content: flex-end;
		align-items: center;

		.btn {
			line-height: 52rpx;
			padding: 0rpx 16rpx;
			border-radius: 26rpx;
			border: 2rpx solid #ff9900;
			font-size: 26rpx;
			text-align: center;
			color: #ff9900;
			;
			margin-right: 10rpx;
		}

		.more {
			align-self: center;
			flex: 1;
			margin-right: 10rpx;
		}

		.evaluate {
			color: $u-type-warning-dark;
			border-color: $u-type-warning-dark;
		}
	}

	.content {
		.title {
			font-size: 28rpx;
			line-height: 50rpx;
		}

		.type {
			margin: 10rpx 0;
			font-size: 24rpx;
			color: $u-tips-color;

			.service-type {
				float: right;
			}
		}

		.delivery-time {
			color: #e5d001;
			font-size: 24rpx;
		}
	}

	.check-state-text {
		display: inline-block;
		padding: 0rpx 10rpx;
		margin-right: 10rpx;
		border-radius: 4rpx;
	}


	.list-tools {
		display: flex;
		justify-content: flex-end;
		margin-right: 20rpx;
		position: absolute;
		top: 0rpx;
		right: 0rpx;
		z-index: 99;

		.find-date {
			margin-right: 20rpx;
		}
	}
</style>